<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
      button {
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 
        .trim 去除收尾空格     /^\s*|\s*$/
       -->
      <input type="text" v-model.trim="word" @keyup.enter="add" />
      <button @click="list.push(word),word=''">添加</button>
      <ul v-if="list.length">
        <li v-for="(item,index) in list">
          {{item}} <button @click="list.splice(index,1)">删除</button>
          <button :disabled="index==0" @click="up(index)">↑</button>
          <button :disabled="index==list.length-1" @click="down(index)">
            ↓
          </button>
        </li>
      </ul>
      <p v-else>空空如也</p>
    </div>
  </body>
  <script>
    let app = Vue.createApp({
      data() {
        return {
          list: ["周杰伦", "蔡徐坤", "吴亦凡"], //列表数据
          word: "", //输入框内容绑定
        };
      },
      methods: {
        add() {
          this.list.push(this.word);
          this.word = "";
        },
        up(index) {
          let prev = this.list[index - 1];
          this.list[index - 1] = this.list[index];
          this.list[index] = prev;
        },
        down(index) {
          let next = this.list[index + 1];
          this.list[index + 1] = this.list[index];
          this.list[index] = next;
        },
      },
    });
    app = app.mount("#app");
  </script>
</html>
